<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        #map_container {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
    <!-- 通用方法库common.js,提升开发速度 -->
    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
    <!-- 下边是需要的两个库 -->
    <script src="https://mapv.baidu.com/build/mapv.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
    <title>地图展示</title>
</head>

<body>
    <div id="map_container"></div>
    <script type="text/javascript">
        /* initMap初始化通用方法 （id固定）*/
        var map = initMap({
            tilt: 0,
            heading: 0,
            center: [103.438656, 25.753594],
            zoom: 8,
            style: snowStyle, // 通用-默认样式
            skyColors: [
                // 地面颜色
                'rgba(226, 237, 248, 0)',
                // 天空颜色
                'rgba(186, 211, 252, 1)'
            ]
        });
        // 1.准备数据源 
        setData(initData());

        function initData() {
            var data = [];
            var citys = [
                '北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
                '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
                '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
            ];
            var randomCount = 700;
            // 构造数据
            while (randomCount--) {
                // 通过mapv库，根据城市获取相应坐标
                var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)]);
                data.push({
                    geometry: {
                        type: 'Point',
                        // 坐标
                        coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
                    },
                    properties: {
                        count: Math.random() * 100
                    }
                });
            }
            return data;
        }



        // 2.绘制数据源
        function setData(data) {
            // 1. 生成mapvgl 视图 View
            var view = new mapvgl.View({
                map: map
            });
            // 控制点的大小和颜色
            var intensity = new mapvgl.Intensity({
                max: 100,
                min: 0,
                gradient: {
                    0: 'rgb(25, 66, 102, 0.8)',
                    0.3: 'rgb(145, 102, 129, 0.8)',
                    0.7: 'rgb(210, 131, 137, 0.8)',
                    1: 'rgb(248, 177, 149, 0.8)'
                },
                maxSize: 30,
                minSize: 5
            });
            // 2. 初始化mapvgl 的 Point对象
            var pointLayer = new mapvgl.PointLayer({
                blend: 'lighter',
                size: function(data) {
                    return intensity.getSize(data.properties.count);
                },
                color: function(data) {
                    return intensity.getColor(data.properties.count);
                }
            });
            // 3. 将Point 对象加入View中
            view.addLayer(pointLayer);
            // 4.将data与point进行绑定
            pointLayer.setData(data);
        }
    </script>
</body>

</html>